<template>
  <div class="login">
    <div class="login-box">
      <!-- <img src="../image/1.jpg" alt=""> -->
      <div class="login-form">
        <el-form ref="loginForm">
          <div class="login-form-title">
            <p style="font-size: 45px;">未来媒体实验室</p>

          </div>
          <el-form-item prop="name">
            <el-input type="text" auto-complete="off" placeholder="账号" prefix-icon="iconfont icon-user"
              v-model="loginForm.name" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" prefix-icon="iconfont icon-lock" v-model="loginForm.password" />
          </el-form-item>

          <el-form-item style="width: 100%">
            <el-button class="login-btn" size="medium" type="warning" plain style="width: 100%" @click="login">
              <span>登录</span>
            </el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>



<script>
import axios from 'axios';

export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      loginForm: {
        name: '',
        password: '',
      },
      isLoggingIn: false // 添加登录中标志位
    };
  },

  methods: {
    login() {
      if (this.isLoggingIn) {
        return; // 如果正在登录中则直接返回
      }
      this.isLoggingIn = true;
      axios.post('api/admin/login',
        this.loginForm).then((res) => {
          let status = res.data.errorMessage
          console.log(res);
          if (String(status) === "用户不存在") {
            //账号不存在
            this.$message.error('账号不存在')
          } else if (String(status) == '密码错误') {
            this.$message.error('用户名或密码错误')
          } else {
            this.$message.success('用户名或密登录成功，跳转到系统首页')
            // 一、使用本地存储localStorage实现登录存储的功能、
            if (res.code === 200) {
              const token = res.data.token; // 确保从正确的字段中获取 token
              localStorage.setItem('token', token);
            }
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            localStorage.setItem('token', res.data.data.token)
            this.$router.push({
              path: '/work'
            })
          }
          this.isLoggingIn = false; // 登录完成后重置标志位
        })
    },

  }
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../assets/picture.jpg);
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>
